<template>
  <div>
    <div class="box">
      <div class="title">孤城_music:</div>
      <div class="audio-box" @click="btn">
        <!-- 播放 -->
        <div class="btn-play" v-show="FLAG">
          <span></span> <span style="margin-left:5px"></span>
        </div>
        <!-- 暂停 -->
        <div class="btn-stop" v-show="!FLAG"></div>
      </div>
    </div>
    <audio
      src="../assets/audio/孤城.mp3"
      ref="audio"
      class="audio"
      controls
      loop
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      FLAG: false,
    };
  },
  methods: {
    btn() {
      this.FLAG = !this.FLAG;
      if (this.$refs.audio.paused) {
        this.$refs.audio.play();
      } else {
        this.$refs.audio.pause();
      }
    },
  },
};
</script>

<style lang="less" scoped>
@hei: #000000;
.audio {
  width: 0;
  height: 0;
  opacity: 0;
  position: absolute;
}
.box {
  position: fixed;
  top: -200px;
  right: 10%;
  transition: 1s;
  animation: myfirst 1s ease forwards;
  animation-delay: 2s;
  @keyframes myfirst {
    from {
      top: -100px;
    }
    to {
      top: 10%;
    }
  }
  .flex();
  .title {
    color: @color;
    margin-right: 20px;
    font-size: 18px;
    text-shadow: 5px 5px 10px pink;
  }
  .audio-box {
    width: 80px;
    height: 80px;
    background-color: @color;
    opacity: 0.6;
    transition: 1s;
    border-radius: 50%;
    cursor: pointer;
    .flex();
    --borderWidth: 3px;
    background: #1d1f20;
    position: relative;
    &::after {
      content: "";
      position: absolute;
      top: calc(-1 * var(--borderWidth));
      left: calc(-1 * var(--borderWidth));
      height: calc(100% + var(--borderWidth) * 2);
      width: calc(100% + var(--borderWidth) * 2);
      background: linear-gradient(
        60deg,
        #f79533,
        #f37055,
        #ef4e7b,
        #a166ab,
        #5073b8,
        #1098ad,
        #07b39b,
        #6fba82
      );
      border-radius: 50%;

      // border-radius: calc(2 * var(--borderWidth));
      z-index: -1;
      animation: animatedgradient 3s ease alternate infinite;
      background-size: 300% 300%;
    }
    @keyframes animatedgradient {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }

    &:hover {
      width: 100px;
      height: 100px;
      opacity: 0.5;
    }
    .btn-play {
      width: 15px;
      height: 15px;
      // background-color: #000000;
      .flex();
      span {
        display: inline-block;
        width: 5px;
        height: 15px;
        background-color: @hei;
      }
    }
    .btn-stop {
      width: 0px;
      height: 0px;
      border-left: 15px solid @hei;
      border-top: 7.5px solid transparent;
      border-bottom: 7.5px solid transparent;
    }
  }
}
// .current {
//   animation: rotate 10s linear infinite;
//   box-shadow: 0px 0px 30px #ffffff;
//   background-image: url(~@/assets/images/avatar.jpg);
//   background-position: center center;
//   background-size: cover;
// }
// @keyframes rotate {
//   from {
//     transform: rotate(0deg);
//   }
//   to {
//     transform: rotate(360deg);
//   }
// }
</style>
